<template>
  <!-- 歌手组件右边内容组件 -->
  <div class="content">
    <RightHead></RightHead>
    <ChoiceLetter
      v-if="title != '热门歌手'"
      @choice-letter-click="choiceLetterClick"
    ></ChoiceLetter>
    <SingerItem @singer-item-click="singerItemClick"></SingerItem>
  </div>
</template>

<script>
import { defineComponent, inject, reactive, toRefs } from "vue";
import RightHead from "@/components/singerChild/RightHead.vue";
import ChoiceLetter from "@/components/singerChild/ChoiceLetter.vue";
import SingerItem from "@/components/singerChild/SingerItem.vue";
export default defineComponent({
  name: "RightContent",
  components: {
    RightHead,
    ChoiceLetter,
    SingerItem,
  },
  setup(props, context) {
    let data = reactive({});
    let title = inject("title");

    let choiceLetterClick = (letter) => {
      context.emit("choiceLetterClick", letter);
    };

    let singerItemClick = (item) => {
      context.emit("singerItemClick", item)
    }


    return {
      ...toRefs(data),
      title,
      choiceLetterClick,
      singerItemClick
    };
  },
});
</script>
<style scoped>
.content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
}
</style>
